import { Form, Input, Button, AutoComplete, Space, message } from "antd";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { SearchAffiliateOrganizaiton, UpdateOutterMemberInfo } from "./_graphql/edit.outter";

const { Option } = AutoComplete;

const layout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
const tailLayout = { wrapperCol: { offset: 6, span: 16 } };

const EditOutterMemberInfo = ({ record, index, updateMemberInfo }) => {
    const { remoteData } = useModel("global");
    const { organizationUuid } = useModel("organization.info");
    const { onCloseGlobalModal } = useModel("global.modal");
    const [form] = Form.useForm();

    const state = useReactive({
        result: [],
        omEouu: "",
    });

    const handleSearch = async (value) => {
        if (value) {
            let res = await remoteData({
                object: "multi-organization-gateway",
                serviceName: "/graphql/public_graphql_service",
                organizationUuid,
                params: { query: SearchAffiliateOrganizaiton, variables: { oaName: value } },
            });
            state.result = res?.a?.nodes || [];
        }
    };

    const onFinish = async (values) => {
        values.omUuid = record.omUuid;
        state.omEouu && (values.omEouu = state.omEouu);
        let res = await remoteData({
            object: "multi-organization-gateway",
            serviceName: "/graphql/public_graphql_service",
            organizationUuid,
            params: { query: UpdateOutterMemberInfo, variables: values },
        });
        if (res) {
            message.success("成功修改外部成员信息");
            updateMemberInfo(values, index);
            onCloseGlobalModal();
        }
    };

    return (
        <Form {...layout} form={form} onFinish={onFinish} initialValues={record}>
            <Form.Item name="omEona" label="外部组织名称" rules={[{ required: true }]}>
                <AutoComplete onSearch={handleSearch} placeholder="请输入" onSelect={(value, option) => (state.omEouu = option.key)}>
                    {state.result.map((item) => (
                        <Option key={item.oaUuid} value={item.oaName}>
                            {item.oaName}
                        </Option>
                    ))}
                </AutoComplete>
            </Form.Item>
            <Form.Item name="omPosi" label="外部职位名称" rules={[{ required: true }]}>
                <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Space>
                    <Button type="primary" htmlType="submit">
                        保存修改
                    </Button>
                    <Button htmlType="button" onClick={() => form.resetFields()}>
                        重置
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
};

export default EditOutterMemberInfo;
